<!--
 * @Description: 首页
 * @Author: Zhanghan
 * @Date: 2024-02-06 19:58:31
 * @LastEditTime: 2024-02-09 19:06:55
 * @LastEditors: Zhanghan
-->
<template>
  <scroll-view :class="styles.box" :scrollY="true">
    <!-- 首页轮播 -->
    <nut-swiper
      :init-page="1"
      :pagination-visible="true"
      pagination-color="#426543"
      auto-play="3000"
    >
      <nut-swiper-item v-for="(item, index) in swipperList" :key="index">
        <image :src="item?.picUrl" :class="styles.sw_img" />
      </nut-swiper-item>
    </nut-swiper>
    <!-- 商品列表 -->
    <view :class="styles.shopmian">
     <view :class=" styles.main_head"> 商品列表</view>
     <view :class="styles.shop_list">
     <view v-for="(item,index) in shopList" :key="index" :class="styles.shop_item">
        <image :src="item?.pic" :class="styles.pic" />
        <view :class="styles.des">{{ item?.name }}</view>
    </view>
    </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, Ref , reactive } from "vue";
import { getSwipper , getshopList } from "@/api/home";
import { useDidShow } from "@tarojs/taro";
import styles from "./index.module.scss";

const swipperList: Ref<any[] | undefined> = ref();
const shopList = ref<any[]>();
const param = reactive({
  page:1,
  pageSize:10,
})

//初始化
useDidShow(async () => {
  const res = await getSwipper({ type: "indexBanner" });
  const value = await getshopList({ ...param });
  console.log(value,'数据');
  shopList.value = value?.data;
  
  swipperList.value = res?.data;
});
</script>
